<template>
  <Tabs class="tabs" v-model:active="currentPage" >
    <Tab title="奖励" title-style="font-size: 18px" />
    <Tab title="惩罚" title-style="font-size: 18px" />
  </Tabs>

  <Row>
    <Col class="calendar-div" span="8" offset="2">
      <div class="cell"  @click="show = true">
        {{date1}}
        <img slot="icon" src="../../assets/images/calendar.png" style="width: 17px;margin-left: 10px;margin-bottom: 2px"/>
      </div>
    </Col>
    <Col span="2" @click="resetCalendar">
      <img slot="icon" src="../../assets/images/reset.png" style="width: 17px;margin-left: 10px;margin-top: 6px"/>
    </Col>
    <Col class="calendar-div"  span="8" offset="2">
      <DropdownMenu active-color="#9caf70" >
        <DropdownItem class="dropMenuItem" v-model="currentClass" :options="classOption" @click="tableChange"  title-class="titleClass"/>
      </DropdownMenu>
    </Col>
  </Row>

  <!--card-->
  <Row class="card" v-for="student in currentData" >
    <Col class="card-left"  @click="showCard(student)">
      <Row class="card-name">
        {{ student.studentName }}
      </Row>
      <Row class="card-time">
        {{ student.time }}
      </Row>
    </Col>

    <Col :class="{'card-right-tea' : isTea , 'card-right-par' : !isTea}"  @click="showCard(student)">
      {{ student.description }}
    </Col>
    <!--只有领导和老师可以修改卡片信息-->
    <Col class="card-modify" v-show="isTea">
      <Row  @click="modifyCard(student)">
        <img slot="icon" src="../../assets/images/modify.png" style="width: 22px;margin-bottom: 5px">
      </Row>
      <Row  @click="deleteCard(student.id)">
        <img slot="icon" src="../../assets/images/cancel.png" style="width: 22px;margin-top: 5px">
      </Row>
    </Col>

    <Calendar v-model:show="show" @confirm="calendarConfirm" color="#a3d33b" :min-date="new Date(1990, 0, 1)" :max-date="new Date(Date.now())"/>
  </Row>

  <!--查看详细信息Dialog-->
  <VanDialog v-model:show="detailShow" title="学生奖罚信息详情" >
    <Row class="row-field" >
      <Col class="dialogCol1">姓名</Col>
      <Col class="dialogCol2">{{dialogDetailName}}</Col>
    </Row>
    <Row class="row-field">
      <Col class="dialogCol1">日期</Col>
      <Col class="dialogCol2">{{dialogDetailTime}}</Col>
    </Row>
    <Row class="row-field">
      <Col class="dialogCol1">内容</Col>
      <Col class="dialogCol2">{{dialogDetailDescription}}</Col>
    </Row>
  </VanDialog>

  <!--修改信息Dialog-->
  <VanDialog  v-model:show="modifyShow" title="修改学生奖罚信息"  show-cancel-button @confirm="confirm(currentDialogId)" @cancel="cancel">
    <Row class="row-field" >
      <Col class="dialogCol1">姓名</Col>
      <Col class="dialogCol2">{{currentDialogName}}</Col>
    </Row>
    <Row class="row-field"  @click="show = true">
      <Col class="dialogCol1">日期</Col>
      <Col class="dialogCol2">{{newDate}}</Col>
    </Row>
    <Row class="row-field">
      <Col class="dialogCol1">内容</Col>
      <Field class="dialogCol2" v-model="newDescription"  placeholder="请输入内容"
             rows="4"
             autosize
             type="textarea"
             maxlength="100"
             show-word-limit/>
    </Row>

  </VanDialog>
</template>


<script setup name="Rewardpunished">
import { Row, Col, Calendar, Tabs, Tab, DropdownMenu, DropdownItem, Dialog, Field, Cell, CellGroup, Toast } from "vant";
import { ref, watch } from "vue";
import {getReward, getPunished, getClasses, modifyInfo, deleteInfo} from "@/v-api/school/rewardpunish";
import { Local } from "@/utils/storage";

const show = ref(false);
const date1 = ref('请选择时间');

const role = Local.get('userInfo').role;
const rewardData = ref([])
const punishData = ref([])
const currentData = ref([])
const currentPage = ref(0) //0是奖励，1是惩罚
const currentClass = ref(0)
const isTea = role === 0 || role ===1;
const currentDialogName = ref('')
const currentDialogId = ref('')

const VanDialog = Dialog.Component;
const modifyShow = ref(false)
const newDate = ref('')
const newDescription = ref('')

//查看详细信息
const detailShow = ref(false)
const dialogDetailName = ref('')
const dialogDetailDescription = ref('')
const dialogDetailTime = ref('')
const showCard = (student) =>{
  detailShow.value = true;
  dialogDetailName.value = student.studentName;
  dialogDetailTime.value = student.time;
  dialogDetailDescription.value = student.description;
}


const classOption = ref([])
const classes = ref([])
const getClassData = async () => {
  classes.value = (await getClasses()).data
  // console.log(classes.value)
  classOption.value = classes.value.map((item,index) =>{
    return {
      text: item.className,
      value: index+1
    }
  })
  classOption.value.unshift({text:'所有班级',value:0})
}
getClassData();


const formatDate = (date1) => `${date1.getFullYear()}-${date1.getMonth() + 1}-${date1.getDate()}`;
const calendarConfirm = (value) => {
  if(modifyShow.value){
    show.value = false;
    newDate.value = formatDate(value);
  }
  if(!modifyShow.value){
    show.value = false;
    date1.value = formatDate(value);
    tableChange()
  }
}

const resetCalendar = () => {
  show.value = false; // 隐藏日历
  date1.value = '请选择时间'; // 重置选中的日期
}

const tableChange = async () => {
  rewardData.value = (await getReward()).data;
  punishData.value = (await getPunished()).data;
  // console.log(rewardData.value)
  // console.log(punishData.value)
  if (currentPage.value === 0) {
    if (date1.value === '请选择时间' && currentClass.value === 0) {
      currentData.value = rewardData.value
    }
    if(date1.value !== '请选择时间' && currentClass.value === 0){
      currentData.value = rewardData.value.filter((item) => {
        return new Date(item.time).toDateString() === new Date(date1.value).toDateString()
      })
    }
    if(date1.value === '请选择时间' && currentClass.value !== 0){
      currentData.value = rewardData.value.filter((item) => {
        return item.classId === classes.value[currentClass.value-1].classId
      })
    }
    if(date1.value !== '请选择时间' && currentClass.value !== 0){
      currentData.value = rewardData.value.filter((item) => {
        return (new Date(item.time).toDateString() === new Date(date1.value).toDateString()) && item.classId.toString() === currentClass.value.toString()
      })
    }
  }
  if (currentPage.value === 1) {
    if (date1.value === '请选择时间' && currentClass.value === 0) {
      currentData.value = punishData.value
    }
    if(date1.value !== '请选择时间' && currentClass.value === 0){
      currentData.value = punishData.value.filter((item) => {
        return new Date(item.time).toDateString() === new Date(date1.value).toDateString()
      })
    }
    if(date1.value === '请选择时间' && currentClass.value !== 0){
      currentData.value = punishData.value.filter((item) => {
        return item.classId === classes.value[currentClass.value-1].classId
      })
    }
    if(date1.value !== '请选择时间' && currentClass.value !== 0){
      currentData.value = punishData.value.filter((item) => {
        return (new Date(item.time).toDateString() === new Date(date1.value).toDateString()) && item.classId.toString() === currentClass.value.toString()
      })
    }
  }
}
// 监听 currentPage 和 date1 的变化
watch(() => [currentPage.value,date1.value], () =>{
  tableChange();
})


tableChange();

//点击修改
const modifyCard = (student) => {
  modifyShow.value = true;
  currentDialogName.value = student.studentName;
  currentDialogId.value = student.id;
  newDate.value = student.time;
  newDescription.value = student.description;
}

//确认修改信息
const confirm = (id) => {
  modifyShow.value = false;
  //调用修改函数
  modifyInfo(id,new Date(newDate.value),newDescription.value)
  // console.log(newDescription.value)
  // console.log(newDate.value)
  // console.log(id)
  //reset表单
  newDescription.value = ''
  newDate.value = '请选择时间'
  tableChange();
  Toast.success({
    message: '修改成功',
    position: 'bottom',
  });
}
//取消修改信息
const cancel = () => {
  modifyShow.value = false;
  //reset表单
  newDescription.value = ''
  newDate.value = ''
}

//点击删除
const deleteCard = (key) => {
  Dialog.confirm({
    title: '提示',
    message: '是否确认删除？',
  }).then(() => {
    // on confirm
    tableChange()
    deleteInfo(key)
    Toast.success({
      message: '删除成功',
      position: 'bottom',
    });
  }).catch(() => {
    // on cancel
    Toast({
      message: '取消删除',
      position: 'bottom',
    });
  });
}
</script>

<style scoped>
.tabs{
  margin-bottom: 20px;
}
.tabs :deep(.van-tabs__line){
  background-color: #9caf70;
}

.calendar-div{
  margin-bottom: 2px;
  width: 120px;
  height: 30px;
  border: 1px solid #9caf70;
  border-radius: 7px;

  :deep(.van-dropdown-menu__bar){
    box-shadow: unset !important;
    background-color:transparent !important;
    height: 28px !important;

  }
  :deep(.van-popup){
    width: 33% !important;
    right: 8% !important;
    left:auto;
    top: 1px;
  }
  :deep(.titleClass){
    color: grey !important;
  }
  :deep(.van-dropdown-item__content .van-cell__title){
    flex:2 !important;
  }
}

.cell{
  /* //width: 100%; */
  height: 100%;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14.5px;
  color: gray;
}

.card{
  display: flex; /* 使用flex布局以使子元素水平排列 */
  height: 85px;
  margin: 20px;
  align-items: center; /* 垂直居中子元素 */
  justify-content: space-between; /* 水平分布子元素 */
  border: 2px solid  #9caf70;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 添加阴影效 */
}
.card-left{
  width: 35%;
  display: flex; /* 使用flex布局以垂直排列子元素 */
  flex-direction: column; /* 子元素垂直排列 */
  align-items: center; /* 水平居中子元素 */
}
.card-name{
  width: 100%;
  height: 65%;
  margin-bottom:15px;
  font-size: 18px;
  text-align: center;
  justify-content: center; /* 水平居中文本 */
  align-items: center; /* 垂直居中文本 */
}
.card-time{
  width: 100%;
  height: 35%;
  font-size: 13px;
  text-align: center;
  color: grey;
  justify-content: center; /* 水平居中文本 */
  align-items: center; /* 垂直居中文本 */
}
.card-right-par{
  width:65%;
  height: 70%;
  padding-left: 20px;
  padding-right: 10px;
  font-size: 16px;
  color: #2b2f21;
  align-items: center; /* 垂直居中文本 */
  justify-content: center; /* 水平居中文本 */
  border-left: 2.5px dashed #b4ccac;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card-right-tea{
  width:55%;
  height: 70%;
  padding-left: 20px;
  padding-right: 10px;
  font-size: 16px;
  color: #2b2f21;
  align-items: center; /* 垂直居中文本 */
  justify-content: center; /* 水平居中文本 */
  border-left: 2.5px dashed #b4ccac;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card-modify{
  width:10%;
}


.row-field{
  margin:30px;
}
.dialogCol1{
  flex:1
}
.dialogCol2{
  flex:2;
  color:grey;
  font-size: 15px;
  padding:0;
}
</style>
